<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测验管理</title>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 moment.js-->
</head>
<body>
<div id="tableView">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">

            <el-form-item label="试卷名称">
                <el-input v-model="searchForm.name" placeholder="试卷名称"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="search" @click="loadingData">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">新增测验</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--列表-->
    <el-row>
        <el-table
                align="center"
                :data="tableData"
                border
                height="620px"
                @selection-change="selectionChange"
                style="width: 100%">

            <el-table-column
                    align="center"
                    label="序号"
                    type="index"
                    width="100px"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="exam_name"
                    label="试卷名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="begin_time"
                    label="开始时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="end_time"
                    label="结束时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="测验单位">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="exam_state"
                    label="状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="400"
                    label="操作">
                <template scope="scope">
                    <el-button v-if="scope.row.exam_state!='已出题'" :plain="true" type="info"  size="small" icon="el-icon-view" @click="seeClick(scope.row)">查看</el-button>
                    <el-button v-else="scope.row.exam_state=='已出题'" :plain="true" type="warning"  size="small" icon="el-icon-edit" @click="editClick(scope.row)">编辑</el-button>
                    <el-button :plain="true" type="success"  size="small" :disabled="scope.row.exam_state!='已出题'" icon="el-icon-printer" @click="generateClick(scope.row)">生成考试人员名单</el-button>
                    <el-button :plain="true" type="danger"  size="small" :disabled="scope.row.exam_state!='已出题'"  icon="el-icon-delete" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row  type="flex" justify="end">
        <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>
    <el-dialog :title="编辑测验信息" :visible.sync="editFormVisible" width="50%" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="150px" :rules="FormRules" ref="editForm">
            <el-form-item label="测验单位名称" prop="information_id" >
                <el-select  v-model="editForm.information_id" placeholder="请选择" disabled>
                    <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="开始时间" prop="begin_time">
                <el-date-picker
                        v-model="editForm.begin_time"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions4">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="editForm.end_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions2">
                </el-date-picker
                >
            </el-form-item>
            <el-form-item label="试卷名称" prop="exam_name">
                <el-input v-model="editForm.exam_name" ></el-input>
            </el-form-item>

            <el-form-item label="试卷总分" >
                <el-input v-model="editForm.score" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目数量" >
                <el-input v-model="editForm.number" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目分值" >
                <el-input v-model="editForm.one_score" disabled></el-input>
            </el-form-item>

            <el-form-item label="考试时长（分钟）" prop="exam_time">
                <el-input v-model="editForm.exam_time"></el-input>
            </el-form-item>
            <el-form-item label="考试人员比例（%）" prop="peopel">
                <el-input v-model="editForm.peopel" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')">取消</el-button>
            <el-button type="primary" @click.native="editSubmit('editForm')">提交</el-button>
        </div>
    </el-dialog>

    <!--   查看-->
    <el-dialog :title="查看测验信息" :visible.sync="seeFormVisible" width="50%" :close-on-click-modal="false">
        <el-form :model="seeForm" label-width="150px" :rules="FormRules" ref="seeForm">
            <el-form-item label="测验单位名称" prop="information_id" >
                <el-select  v-model="seeForm.information_id" placeholder="请选择" disabled>
                    <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="开始时间" prop="begin_time">
                <el-date-picker
                        disabled
                        v-model="seeForm.begin_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions0">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                        disabled
                        v-model="seeForm.end_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions1">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="试卷名称" prop="exam_name">
                <el-input v-model="seeForm.exam_name" disabled></el-input>
            </el-form-item>

            <el-form-item label="试卷总分" >
                <el-input v-model="seeForm.score" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目数量" >
                <el-input v-model="seeForm.number" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目分值" >
                <el-input v-model="seeForm.one_score" disabled></el-input>
            </el-form-item>

            <el-form-item label="考试时长（分钟）" prop="exam_time">
                <el-input v-model="seeForm.exam_time" disabled></el-input>
            </el-form-item>
            <el-form-item label="考试人员比例（%）" prop="peopel">
                <el-input v-model="seeForm.peopel" disabled></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="seeFormVisible = false" @click="resetForm('seeForm')">关闭</el-button>
        </div>
    </el-dialog>


    <!-- 添加-->
    <el-dialog :title="添加测验信息" :visible.sync="addFormVisible" width="50%" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="250px" :rules="FormRules" ref="addForm">
            <el-form-item label="测验单位名称" prop="information_id" >
                <el-select  v-model="addForm.information_id" placeholder="请选择" >
                    <el-option
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="开始时间" prop="begin_time">
                <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="addForm.begin_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions0">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
                <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="addForm.end_time"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions1">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="试卷名称" prop="exam_name">
                <el-input v-model="addForm.exam_name" ></el-input>
            </el-form-item>

            <el-form-item label="试卷总分" >
                <el-input v-model="addForm.score" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目数量" >
                <el-input v-model="addForm.number" disabled></el-input>
            </el-form-item>
            <el-form-item label="题目分值" >
                <el-input v-model="addForm.one_score" disabled></el-input>
            </el-form-item>
            <el-form-item label="考试时长（分钟）" prop="exam_time">
                <el-input v-model="addForm.exam_time" ></el-input>
            </el-form-item>
            <el-form-item label="考试人员比例（%）" prop="peopel">
                <el-input v-model="addForm.peopel" ></el-input>
            </el-form-item>
            <!-- 题型设置 -->
            <span>———————————————————————————————————————————————————</span>
            <p style="font-weight:bold;font-size:18px;"><span style="color:red">*</span>题型设置</p>
            <el-form-item label="习近平总书记系列重要讲话精神" prop="count1">
                <el-input-number v-model="addForm.count1" :precision="0"  :min="0" :max="maxForm.max1" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max1" ></el-input></div>
            </el-form-item>

            <el-form-item label="党的十八大和五中全会精神" prop="count2">
                <el-input-number v-model="addForm.count2" :precision="0"  :min="0" :max="maxForm.max2" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max2" ></el-input></div>
            </el-form-item>
            <el-form-item label="河南省情和省委省政府战略部署" prop="count3">
                <el-input-number v-model="addForm.count3" :precision="0"  :min="0" :max="maxForm.max3" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max3" ></el-input></div>
            </el-form-item>
            <el-form-item label="社会主义核心价值观" prop="count4">
                <el-input-number v-model="addForm.count4" :precision="0"  :min="0" :max="maxForm.max4" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max4" ></el-input></div>
            </el-form-item>
            <el-form-item label="中华优秀传统文化" prop="count5">
                <el-input-number v-model="addForm.count5" :precision="0"  :min="0" :max="maxForm.max5" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max5" ></el-input></div>
            </el-form-item>
            <el-form-item label="文明礼仪基本知识" prop="count6">
                <el-input-number v-model="addForm.count6" :precision="0"  :min="0" :max="maxForm.max6" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max6" ></el-input></div>
            </el-form-item>
            <el-form-item label="时事政治" prop="count7">
                <el-input-number v-model="addForm.count7" :precision="0"  :min="0" :max="maxForm.max7" ></el-input-number>
                <div style="display: inline-block" width="10px"><el-input disabled v-model="maxForm.max7" ></el-input></div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="addFormVisible = false" @click="resetForm('addForm')">取消</el-button>
            <el-button type="primary" @click.native="addSubmit('addForm')">提交</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>

    var Main={
        data(){
            return{
                //下拉框数据
                options2:[],
                //修改弹框显示状态
                editFormVisible:false,
                //查看弹框显示状态
                seeFormVisible:false,
                //添加弹框显示状态
                addFormVisible:false,
                //编辑弹框数据
                editForm:{
                    information_id:'',
                    number:'10',
                    one_score:'10',
                    exam_time:'',
                    peopel:'',
                    score:'100',
                    exan_name:'',
                    begin_time:'',
                    end_time:'',
                },
                //查看弹框数据see
                seeForm:{
                    information_id:'',
                    number:'10',
                    one_score:'10',
                    exam_time:'',
                    peopel:'',
                    score:'100',
                    exan_name:'',
                    begin_time:'',
                    end_time:'',
                },
                //查看弹框数据see
                addForm:{
                    information_id:'',
                    number:'10',
                    one_score:'10',
                    exam_time:'',
                    peopel:'',
                    score:'100',
                    exam_name:'',
                    begin_time:'',
                    end_time:'',
                    count1:0,
                    count2:0,
                    count3:0,
                    count4:0,
                    count5:0,
                    count6:0,
                    count7:0,
                },
                //题目数量
                maxForm:{
                    max1:0,
                    max2:0,
                    max3:0,
                    max4:0,
                    max5:0,
                    max6:0,
                    max7:0,
                },
                //表格数据
                tableData:[],
                //搜索表单
                searchForm: {
                    name: ''
                },
                //当前页
                currentPage:1,
                //分页大小
                pageSize:10,
                //总记录数
                total:800,
                //日期判断
                pickerOptions0: {
                    disabledDate: (time) => {
                        return time.getTime() < Date.now()
                    }
                },
                pickerOptions4: {
                    disabledDate: (time) => {
                        return time.getTime() < Date.now()
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        if(this.addForm.begin_time){
                            return new Date(this.addForm.begin_time).getTime() > time.getTime() || time.getTime() < Date.now()
                        }else{
                            return time.getTime() < Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
                pickerOptions2: {
                    disabledDate: (time) => {
                        if(this.editForm.begin_time){
                            return new Date(this.editForm.begin_time).getTime() > time.getTime() || time.getTime() < Date.now()
                        }else{
                            return time.getTime() < Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
                //表单验证
                FormRules: {
                    information_id:[
                        { required: true, message: '请选择单位', trigger: 'change' }
                    ],
                    begin_time:[
                        { required: true, message: '请选择开始时间', trigger: 'change' }
                    ],
                    end_time:[
                        { required: true, message: '请选择结束试卷时间', trigger: 'change' }
                    ],
                    exan_name:[
                        { required: true, message: '请输入试卷名称', trigger: 'blur' }
                    ],
                    exam_time:[
                        { required: true, message: '请输入考试时长', trigger: 'blur' }
                    ],
                    peopel:[
                        { required: true, message: '请输入考试人员比例', trigger: 'blur' }
                    ],


                },

            };
        },
        created: function () {
            //加载数据表格
            this.loadingData();
            this.loadingOption();
        },
        methods: {
            //加载下拉框
            loadingOption:function(){
                var self = this;
                axios.post('/cygl/infoList').then(function (response) {
                    self.options2=response.data;
                });
            },
            //加载数据表格
            loadingData:function() {
                var self = this;
                //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
                var start =(this.currentPage-1)*this.pageSize;
                axios.post('/cygl/list',{'start':start,'pageSize':this.pageSize,'name':this.searchForm.name}).then(function (response) {
                    self.tableData = response.data.data;
                    self.total=response.data.total;
                });
            },
            deleteClick:function (row) {
                var _self = this;
                this.$confirm('确认删除 ‘' + row.exam_name +'’ 吗?', '提示', {
                    type: 'success'
                }).then(function(){
                    var  url="/cygl/del/"+row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message: row.exam_name + ' 删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            addClick:function () {
                this.loadingOption();

            },
            seeClick:function (row) {
                this.seeForm=row;
                this.seeFormVisible=true;
            },
            editClick:function (row) {
                this.editForm=row;
                this.editFormVisible=true;
            },
            //修改提交事件
            editSubmit:function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var _self = this;
                        var formData =this.editForm;
                        //alert(formData);
                        var goUrl='/cygl/upd';
                        //alert(JSON.stringify(formData));
                        axios.post(goUrl,formData).then(function(response){
                            if(response.data>0){
                                _self.editFormVisible = false;// 让弹出层隐藏
                                _self.$refs[formName].resetFields();//验证清空
                                _self.loadingData();//重新加载数据
                                _self.$message({
                                    message:'操作成功',
                                    type: 'success'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //生成考试人员事件
            generateClick:function (row) {
                var _self = this;
                this.$confirm('确认生成考试名单并发送邮件吗?', '提示', {
                    type: 'success'
                }).then(function(){
                    var  url="/cygl/sendemail";
                    var searchForm=row;
                    axios.post(url,searchForm).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:  ' 发送成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //添加事件
            addClick:function () {
                //显示弹框
                this.addFormVisible=true;
                var self=this;
                axios.post('/cygl/max').then(function (response) {
                    self.maxForm=response.data;
                    self.addForm={
                        information_id:'',
                        number:'10',
                        one_score:'10',
                        exam_time:'',
                        peopel:'',
                        score:'100',
                        exam_name:'',
                        begin_time:'',
                        end_time:'',
                        count1:0,
                        count2:0,
                        count3:0,
                        count4:0,
                        count5:0,
                        count6:0,
                        count7:0,
                    }

                });
                //数据重新加载

            },
            //添加的提交事件
            addSubmit:function (formName) {
                var _self=this;
                var a=this.addForm.count1+this.addForm.count2+this.addForm.count3+this.addForm.count4+this.addForm.count5+this.addForm.count6+this.addForm.count7;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (a==10){
                            axios.post('/cygl/add',_self.addForm).then(function (response) {
                                if (response.data>0){
                                    _self.addFormVisible=false;
                                    _self.$message({
                                        message:  '出题成功',
                                        type: 'success'
                                    });
                                    _self.loadingData();
                                }
                                this.$refs[formName].resetFields();
                            });
                        } else {
                            _self.$message({
                                message:  '题目数量请选择不等于10，请重新选择',
                                type: 'warning'
                            });
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm:function (messageForm) {
                //校验取消
                this.$refs[messageForm].resetFields();
            },
            //分页大小修改事件
            pageSizeChange:function(val) {
                console.log('每页 ' + val +' 条');
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.a=1;
                this.currentPage = val;
                console.log('当前页: ' + val);
                var _self = this;
                //alert(111);
                _self.loadingData();//重新加载数据
            },
        }
    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#tableView');
</script>
</html>